<template>
    <div class="all">
        <div class="top">
            <div class="biaoti">全省农村集体资产清算核资报送系统和组织登记赋码管理<br/>系统软件操作培训班</div>
        </div>
        <div v-show="query">
            <div class="center">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0" class="demo-ruleForm">
                    <el-form-item prop="type">
                        <el-tooltip content="会议名称" placement="bottom-start" effect="light">
                            <el-input v-model="ruleForm.type" placeholder="会议名称" disabled></el-input>
                        </el-tooltip>
                    </el-form-item>
                    <el-form-item prop="name">
                        <el-tooltip content="姓名" placement="bottom-start" effect="light">
                            <el-input v-model="ruleForm.name" placeholder="姓名"></el-input>
                        </el-tooltip>
                    </el-form-item>
                    <el-form-item  prop="idcard">
                        <el-tooltip content="身份证号码" placement="bottom-start" effect="light">
                            <el-input v-model="ruleForm.idcard" placeholder="身份证号码"></el-input>
                        </el-tooltip>
                    </el-form-item>
                    <el-form-item  prop="company">
                        <el-tooltip content="单位" placement="bottom-start" effect="light">
                            <!--<el-input v-model="ruleForm.company" placeholder="单位"></el-input>-->
                            <el-select v-model="ruleForm.company.company" placeholder="请选择单位" style="width: 100%">
                                <el-option
                                    v-for="item in ruleForm.company"
                                    :key="item.company"
                                    :label="item.company"
                                    :value="item.company">
                                </el-option>
                            </el-select>
                        </el-tooltip>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')" style="width: 100%">点击报道</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div v-show="!query">
            <div style="font-size: 26px;color: red">{{message}}</div>
            <br/>
            <br/>
            <p>您的报道信息如下：</p>
            <p>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：&nbsp;&nbsp;&nbsp;{{name}}</p>
            <p>单&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;位:&nbsp;&nbsp;&nbsp;{{company}}</p>
            <p>会议名称: &nbsp;&nbsp;&nbsp;{{type}}</p>
            <p>报道时间:&nbsp;&nbsp;&nbsp;{{time}}</p>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                name:'',
                company:'',
                type:'',
                time:'',
                query:true,
                message:'',
                ruleForm: {
                    name: '',
                    idcard:'',
                    type:'',
                    company:[{
                        company:''
                    }]
                },
                rules: {
                    idcard: [
                        { required: true, message: '请输入身份证号码', trigger: 'blur' },
                        // { min: 18, max: 18, message: '长度为18个字符', trigger: 'blur' }
                    ],
                    name: [
                        { required: true, message: '请输入姓名', trigger: 'blur' },
                    ],
                }
            };
        },
        created(){
            this.getInformation()
        },
        methods: {
            getInformation(){

                this.$axios.get('/wechat/achievement/queryreportapi'
                ).then((res)=>{
                    if(res.data.code==201)
                    {
                        this.query=true;
                    }
                    else if(res.data.code==200){
                        this.query=false;
                        this.message=res.data.msg;
                        this.name=res.data.data.truename;
                        this.company=res.data.data.company;
                        this.type=res.data.data.type;
                        this.time=res.data.data.time;
                    }
                })
                this.$axios.get('/wechat/achievement/querycompany'
                ).then((res)=>{
                        this.ruleForm.company=res.data.data.data;
                })
                this.$axios.get('/wechat/achievement/querytype'
                ).then((res)=>{
                    this.ruleForm.type=res.data.data.type;

                })
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$axios.post('/wechat/achievement/reportapi?'+
                            'name='+this.ruleForm.name+
                            '&idcard='+this.ruleForm.idcard+
                            '&type='+this.ruleForm.type+
                            '&company='+this.ruleForm.company.company
                        ).then((res)=>{
                            if(res.data.code==200)
                            {
                                this.$message({
                                    message: res.data.msg,
                                    type: 'success'
                                });
                            }
                            else{
                                this.$message.error(res.data.msg);
                            }
                        })
                    } else {
                        return false;
                    }
                })
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    }
</script>

<style scoped>
    @media (max-width: 700px){
        .all{
            text-align: center;
            margin: 0;
            padding: 0px;
        }
        .top{
            width: 100%;
            height: 50px;
            background: linear-gradient(to right,#0f2027,#203a43,#2c5364);
            margin-bottom: 40px
        }
        .biaoti{
            font-size: 18px;
            color: white;
            text-align: center;
            margin-left: 10px;
        }
        .center{
            width: 80%;
            text-align: center;
            margin: 0 auto;
            margin-top: 20px
        }
        table{
            width: 80%;
            text-align: center;
            padding:10px;
            /*border: 1px solid #5e7382;*/
            margin: 0 auto;
            /*border-radius: 5px;*/
        }
        td{
            border: 1px solid #5e7382;
            width: 200px;
            height: 40px;
            border-radius: 5px;
        }
        th{
            border: 1px solid #5e7382;
            width: 200px;
            height: 40px;
            border-radius: 5px;
        }
        p{
            text-align: left;
            margin-left: 25%;
            line-height: 1.5;
            font-size: 18px;
        }
    }
    @media (min-width: 700px){
        .all{
            text-align: center;
            margin: 0;
            padding: 0px;
        }
        .top{
            margin: 0 auto;
            width: 70%;
            height: 100px;
            border-bottom: 2px solid #5e7382;

        }
        .center{
            width: 500px;
            text-align: center;
            margin: 0 auto;
            margin-top: 30px
        }
        .biaoti{
            text-align: center;
            font-size: 24px;
        }
        table{
            width: 500px;
            text-align: center;
            padding:10px;
            /*border: 1px solid #5e7382;*/
            margin: 0 auto;
            /*border-radius: 5px;*/
            margin-top: 30px
        }
        td{
            border: 1px solid #5e7382;
            width: 200px;
            height: 40px;
            border-radius: 5px;
        }
        th{
            border: 1px solid #5e7382;
            width: 200px;
            height: 40px;
            border-radius: 5px;
        }
        p{
            text-align: center;

            line-height: 1.5;
            font-size: 18px;
        }
    }
</style>
